
<script setup>
import { User, ArrowRight, } from "@element-plus/icons-vue";
import { Indexget_type, getCategory, findSearchHisory } from "../utils/api"
import { reactive, defineProps, computed, ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
const cateList = ref([])
const searchList = ref([])

// defineProps({
//   msg: String,
// });
defineProps({
    isBottmNavigation: {
        type: Boolean,
        default: true,
        required: false
    },
    lisac:{
        default:1
    }
});

onBeforeMount(() => {
    getCategory({ is_tree: 1 }).then(res => {
        if (res.code == 200) {
            cateList.value = res.data
        }
    })
    findSearchHisory({ type: 1 }).then(res => {
        if (res.code == 200) {
            searchList.value = res.data.orUser
        }
    })
})

const router = useRouter();
const showcategry = ref(false); //是否显示分类框
const keyvalue = ref(''); //是否显示分类框
const activecategry = ref(null); //当前选中的分类
const data = reactive({
    showSearchHistory: false, //显示搜索历史
    // activeNav: 1,  //navLIst的当前项
    navLIst: []
});

const datalist = computed(() => {
    let arr = [...data.navLIst]
    arr.forEach((item, index) => {
        if (!item.is_top) {
            arr.splice(index, 1)
        }
    })
    return arr;
})



Indexget_type().then(res => {
    if (res.code == 200) {
        data.navLIst = res.data
    }
})

const gotoRouter = (val, id) => {
    // data.activeNav = val
    router.push({ path: data.navLIst[val].tab, query: { platform_type_id: id } });
};

</script>

<template>

    <div class="wrapCenter" style="padding-top: 40px;">

        <div>
            <div class="flex" style="align-items:flex-start">
                <div class="left">
                    <img src="../assets/logo.png" alt="">
                </div>
                <div class="right flex">
                    <div @mouseleave="data.showSearchHistory = false">
                        <div class="inputBox flex">
                            <input type="text" placeholder="请输入商品名称" @mouseenter="data.showSearchHistory = true"
                                 v-model="keyvalue" />
                            <div class="seacrhIcon cur"
                                @click.stop="router.push({ path: '/allGoods', query: { searchText: keyvalue } })">
                                <img src="../assets/search.png">
                            </div>
                        </div>
                        <div class="searchHistory fontS16" v-if="data.showSearchHistory">
                            <div class="co9">最近搜过</div>
                            <div class="cur sechli" v-for="(item, index) in searchList" :key="index"
                                @click.stop="router.push({ path: '/allGoods', query: { searchText: item.name } })">
                                <span v-if="index < 10">{{ item.name }}</span>
                            </div>
                        </div>
                        <div class="flex fontS16 input_B elipes1" style="width: 683px;" v-if="searchList.length > 0">
                            <div class=" cur" :class="[{ homeRed: index < 3 }]" v-for="(item, index) in searchList"
                                :key="index" @click.stop="router.push({ path: '/allGoods', query: { searchText: item.name } })">
                                {{ item.name }}</div>
                        </div>
                    </div>
                    <div class="userAndcart flex">
                        <div class="box co6 fontS16 flex cur" @click="router.push({ path: '/order/orderHome' })">
                            <el-icon :size="24" color="#666">
                                <User />
                            </el-icon> 
                            <span>个人中心</span>
                        </div>
                        <div class="box cof cur flex" @click="router.push({ path: '/cart' })">
                            <img src="../assets/cart.png" alt="" style="width:28px;height:25px">
                            <span style="padding:0 12px">购物车</span>
                            <el-icon :size="14" color="#fff">
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
            <div @mouseleave="activecategry = null; showcategry = false">
                <div class="bottom flex fontS20" v-if="isBottmNavigation">
                    <!--  -->
                    <div class="allcate center  cur" @mouseenter="showcategry = true">全部商品分类</div>
                    <div v-for="(item, index) in datalist" :key="index" class="cur co6"
                        :class="lisac== index ? 'homeRed' : ''" @click="gotoRouter(index, item.id)">{{
                            item.name
                        }}
                    </div>
                </div>
                <div class="flexJBC cateBox" v-if="showcategry">
                    <div class="categrouBox printLogFather">
                        <div class="li" :class="activecategry == index ? 'active' : ''"
                            v-for="(item, index) in cateList" :key="index" @mouseenter="activecategry = index">
                            <div :style="{ borderBottom: index != cateList.length - 1 ? '1px solid rgba(255, 255, 255, 0.5)' : 'none' }"
                                style="padding-bottom: 17px">
                                <div class="fontS16 cur name"
                                    :style="{ color: activecategry == index ? '#DD2131' : '#fff' }">
                                    {{ item.cate_name }}</div>
                                <el-space :size="14" spacer="|" style="display:flex;flex-wrap:wrap">
                                    <div v-for="(i, j) in item.children" :key="j" style="line-height:30px" class="cur">
                                        {{ i.cate_name }}
                                    </div>
                                </el-space>
                            </div>
                        </div>
                    </div>
                    <div class="rightbox" v-if="activecategry || activecategry === 0">
                        <div v-for="(item, index) in cateList[activecategry].children" :key="index">
                            <div>
                                <div class="lisbox flex">
                                    <div class="leftbox co3 fontS20">
                                        {{ item.cate_name }}
                                    </div>
                                    <div class="lisliright  fontS18">
                                        <el-space :size="14" spacer="|" style="display:flex;flex-wrap:wrap">
                                            <div v-for="(item1, index1) in item.children" :key="index1" class="cur"  @click.stop="router.push({ path: '/allGoods', query: { category_id: item1.store_category_id } })">
                                                {{ item1.cate_name }}
                                            </div>
                                        </el-space>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.sechli {
    color: #5C7DCD
}

.sechli:hover {
    color: #DD2131;
}

.cateBox {
    position: absolute;
    z-index: 9999;

    .categrouBox {

        color: rgba(255, 255, 255, 0.8);

        width: 288px;
        height: 576px;
        overflow: auto;
        background: rgba(0, 0, 0, 0.8);


        .li {
            padding: 17px 24px 0;
            box-sizing: border-box;

            .name {
                // margin-bottom: 18px;
                font-weight: 700;
            }

            /deep/.el-space__item {
                margin-top: 10px;
            }

            /deep/ span {
                margin-top: 10px !important;
            }
        }
    }

    .active {
        color: #DD2131 !important;
        background-color: #fff !important;
    }

    .rightbox {

        width: 1184px;
        height: 576px;
        background: #FFFFFF;
        padding: 20px 40px;
        box-sizing: border-box;

        .name {
            margin-bottom: 8px;
            font-weight: 700;
        }

        .lisbox {
            // padding: 20px 0;
            // padding-top: 20px;
            align-items: flex-start;

            .leftbox {
                width: 15%;
                padding-top: 20px;
            }

            .lisliright {
                width: 100%;
                border-bottom: 1px solid #CCCCCC;
                color: #333;
                padding-bottom: 20px;

                /deep/.el-space__item {
                    margin-top: 20px;

                }

                /deep/.el-space__item:hover {
                    color: #DD2131;
                }

                /deep/ span {
                    margin-top: 20px !important;
                }
            }
        }


    }
}


.bottom {
    margin-top: 40px;

    div {
        margin-right: 80px;
    }

    .allcate {
        width: 288px;
        height: 48px;
        line-height: 48px;
        background: #DD2131;
        color: #fff;

    }
}

.left {

    margin-right: 90px;
}

.right {
    .searchHistory {

        width: 608px;
        padding: 10px;
        box-sizing: border-box;
        background: #FFFFFF;
        opacity: 1;
        border: 1px solid #CCCCCC;
        position: absolute;
        z-index: 99;

        div {
            margin-top: 16px;
        }

        div:nth-of-type(1) {
            margin-top: 0;
        }
    }

    align-items: flex-start;

    .userAndcart {
        margin-left: 40px;

        .box {
            height: 48px;
            line-height: 48px;
            padding: 0 24px;
            background: #F5F5F5;
            opacity: 1;
            border: 1px solid #CCCCCC;
        }

        .box:nth-of-type(2) {
            background: #DD2131;
            border-color: #DD2131;
        }
    }

    .input_B {
        margin-top: 14px;

        div {
            margin-right: 20px;
        }
    }

    .inputBox {
        width: 683px;
        height: 48px;
        border: 2px solid #DD2131;
        padding-left: 20px;
        box-sizing: border-box;
        background-color: #fff;

        input {
            height: 41px;
            flex: 1;
            border: none;
            outline: none;
        }

        .seacrhIcon {
            width: 75px;
            height: 48px;
            background: #DD2131;
            display: flex;
            align-items: center;
            position: relative;
            right: -1px;

            img {
                width: 29.97px;
                height: 29.97px;
                margin: 0 auto;
            }
        }
    }

}
</style>
